<template>
    <div class="acl-page-container">
        <el-card shadow="never">
            <template #header>
                <div class="card-header">
                    <span>读写权限 (ACL)</span>
                </div>
            </template>
            <div class="description">
                <p>通过设置存储桶（Bucket）的读写权限（ACL），您可以控制对整个存储桶的默认访问策略。</p>
            </div>

            <el-divider />

            <div class="acl-settings">
                <div class="setting-title">Bucket ACL</div>
                <div class="setting-body">
                    <!-- 单选框组 -->
                    <el-radio-group v-model="selectedAcl" :disabled="!isEditing" @change="handleAclChange">
                        <el-radio value="private" size="large">
                            私有
                            <div class="option-desc">只有该存储桶的拥有者和授权用户可以读写和列出文件。</div>
                        </el-radio>
                        <el-radio value="public-read" size="large">
                            公共读
                            <div class="option-desc">任何人（包括匿名用户）都可以读取和列出文件，但只有拥有者可以写入。</div>
                        </el-radio>
                        <el-radio value="public-read-write" size="large">
                            公共读写
                            <div class="option-desc risk-warning">（高风险）任何人都可以对文件进行读、写、删除操作。</div>
                        </el-radio>
                    </el-radio-group>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <template v-if="!isEditing">
                    <el-button type="primary" @click="handleEdit" :loading="isLoading">设置</el-button>
                </template>
                <template v-else>
                    <el-button type="primary" @click="triggerSave" :loading="isSaving">保存</el-button>
                    <el-button @click="handleCancel">取消</el-button>
                </template>
            </div>
        </el-card>

        <!-- 确认对话框 (使用 el-dialog) -->
        <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" :close-on-click-modal="false"
            @close="onDialogClose">
            <div v-html="dialog.content"></div>
            <template #footer>
                <span class="dialog-footer">
                    <!-- 当目标是 'private' 时，显示 "取消" 和 "确定" -->
                    <template v-if="dialog.targetAcl === 'private'">
                        <el-button @click="dialog.visible = false">取消</el-button>
                        <el-button type="primary" @click="confirmAclChange">确定</el-button>
                    </template>

                    <!-- 当目标是风险选项时，显示 "选择私有" 和 "继续修改" -->
                    <template v-else>
                        <el-button type="primary" @click="executeAlternativeAction">选择私有</el-button>
                        <el-button @click="confirmAclChange">继续修改</el-button>
                    </template>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';
import apiClient from '@/api';
import { ElMessage } from 'element-plus';

const route = useRoute();
const bucketName = route.params.bucketName;

// 1. 状态管理
const isLoading = ref(true);
const isSaving = ref(false);
const isEditing = ref(false); // 默认非编辑模式

const currentAcl = ref('private'); // 当前已保存的ACL
const selectedAcl = ref('private'); // 用户在UI上选择的ACL
let isDialogAction = ref(false); // 标记是否是dialog内部触发的关闭

// 2. 对话框状态管理
const dialog = reactive({
    visible: false,
    title: '',
    content: '',
    confirmText: '确定',
    targetAcl: null, // 存储用户想要切换到的目标ACL
});

let userActionCompleted = false; // 用于标记用户是否通过点击按钮关闭对话框

// 3. 核心方法
onMounted(async () => {
    await fetchBucketAcl();
});

const fetchBucketAcl = async () => {
    isLoading.value = true;
    try {
        const response = await apiClient.get(`/api/v1/buckets/${bucketName}/acl`);
        currentAcl.value = response.data.acl;
        selectedAcl.value = response.data.acl; // 初始化时，选择项与当前项一致
    } catch (error) {
        ElMessage.error('获取ACL配置失败');
        console.error(error);
    } finally {
        isLoading.value = false;
    }
};

// 点击“设置”按钮
const handleEdit = () => {
    isEditing.value = true;
};

// 点击“取消”按钮
const handleCancel = () => {
    selectedAcl.value = currentAcl.value; // 恢复到原始值
    isEditing.value = false;
};

// 当单选框值变化时触发
const handleAclChange = (newAcl) => {
    // 根据不同的选择，配置不同的对话框内容
    dialog.targetAcl = newAcl;
    dialog.confirmText = '确定';

    if (newAcl === 'public-read') {
        dialog.title = '确认选择公共读？';
        dialog.content = `
      <p>有可能会产生预期外的公网流量费用，<a href="#" target="_blank">详见计费文档</a>。</p>
      <p>公开存储桶（public-read）将不通过身份验证直接响应 GET Bucket 的数据，存在安全风险。目前可产生额外费用的公网流量为，为确保您的数据安全，不推荐非必要场景使用。</p>
      <p>建议您选择私有（private）。</p>
    `;
    } else if (newAcl === 'public-read-write') {
        dialog.title = '确认选择公共读写？';
        dialog.content = `
      <p>有可能会产生预期外的公网流量费用，<a href="#" target="_blank">详见计费文档</a>。</p>
      <p>公开存储桶（public-read-write）可以将您的文件进行任意操作（读、写、删除），并产生不可预估的费用。为避免数据泄露和费用风险，强烈建议您选择私有（private）。</p>
    `;
    } else { // private
        dialog.title = '确认选择私有？';
        dialog.content = '<p>将存储桶设置为私有，所有对该存储桶的访问都需要进行身份验证。</p>';
    }

    dialog.visible = true;
};

// 【核心】当用户点击"继续修改"或"确定"
const confirmAclChange = () => {
    userActionCompleted = true; // 标记用户已完成操作
    dialog.visible = false;
    // 此处无需修改 selectedAcl，因为 v-model 已完成
};

// 【核心】当用户点击"选择私有"
const executeAlternativeAction = () => {
    userActionCompleted = true; // 标记用户已完成操作
    selectedAcl.value = 'private'; // 程序化地将值改回 private
    dialog.visible = false;
};

// 【核心】监听对话框关闭事件，处理意外关闭（ESC，点击遮罩层）
const onDialogClose = () => {
    // 如果不是通过点击按钮完成的
    if (!userActionCompleted) {
        // 将 UI 上的选项恢复到本次修改之前的状态
        selectedAcl.value = currentAcl.value;
    }
    // 每次关闭后都重置标记
    userActionCompleted = false;
};

// 点击"保存"按钮时，触发最终保存
const triggerSave = async () => {
    isSaving.value = true;
    try {
        await apiClient.put(`/api/v1/buckets/${bucketName}/acl`, {
            acl: selectedAcl.value,
        });
        ElMessage.success('ACL权限保存成功');
        currentAcl.value = selectedAcl.value; // 更新当前状态
        isEditing.value = false; // 返回只读模式
    } catch (error) {
        ElMessage.error('保存失败，请重试');
        console.error(error);
    } finally {
        isSaving.value = false;
    }
};
</script>

<style scoped>
.acl-page-container {
    padding: 20px;
}

.description {
    color: #606266;
    font-size: 14px;
    line-height: 1.5;
}

.setting-title {
    font-weight: 500;
    margin-bottom: 20px;
}

.el-radio-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.el-radio {
    margin-bottom: 20px;
    height: auto;
    /* 允许自动高度 */
    align-items: flex-start;
    /* 垂直方向顶部对齐 */
}

.option-desc {
    color: #909399;
    font-size: 13px;
    margin-left: 28px;
    /* 与单选框对齐 */
    margin-top: 4px;
    line-height: 1.4;
}

.risk-warning {
    color: #f56c6c;
}

.action-buttons {
    margin-top: 20px;
}
</style>